<template>
  <div class="quest-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="avatar" label="微信头像" width="100">
        <template #default="scope">
          <img :src="scope.row.user_info?.avatar" class="cover" />
        </template>
      </el-table-column>
      <el-table-column prop="nick_name" label="昵称">
        <template #default="scope">
          <div>{{ scope.row.user_info?.nick_name }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="内容" width="380" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button
            link
            type="danger"
            size="small"
            @click="delHandle(scope.row)"
            >删除</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="statusChangeHandle(scope.row, 1)"
            >通过审核</el-button
          >
          <el-button
            link
            type="danger"
            size="small"
            @click="statusChangeHandle(scope.row, 2)"
            >拒绝</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-24">
      <Pagination
        class="text-center"
        :page="pageForm.page"
        :limit="pageForm.limit"
        :total="tableTotal"
        @pagination="pageHandle"
      />
    </div>
  </div>
</template>

<script setup>
import Pagination from '@/components/Pagination';
import { ref, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  apiPoemList,
  apiPoemDel,
  apiPoemStatus,
} from '@/api/poem';
const tableData = ref([]);
const tableTotal = ref(0);
// 删除
const delHandle = ({ id }) => {
  ElMessageBox.confirm('您确定要删除这个诗吗?', '删除提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      apiPoemDel({
        id
      }).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          });
          getData();
        }
      });
    })
    .catch(() => {});
};
// 审核通过/拒绝
const statusChangeHandle = ({ id }, status) => {
  ElMessageBox.confirm(`您确定要${status===1?'通过':'拒绝'}这个诗吗?`, '删除提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      apiPoemStatus({
        id,
        status
      }).then((res) => {
        if (res.code === 200) {
          ElMessage({
            type: 'success',
            message: '操作成功'
          });
          getData();
        }
      });
    })
    .catch(() => {});
};
/**
 * 表格勾选复选框
 */
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(val);
};
/**
 * 分页
 */
const pageForm = ref({
  page: 1,
  limit: 10
});
const pageHandle = (val) => {
  pageForm.value = val;
  getData();
};
// 获取表格数据
const getData = async () => {
  const { data, total } = await apiPoemList(pageForm.value);
  tableData.value = data;
  tableTotal.value = total;
};
onMounted(() => {
  getData();
});
</script>

<style scoped>
.quest-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
  padding: 16px;
  box-sizing: border-box;
}
.cover{
  height: 36px; 
  width: 36px;
  border-radius: 6px;
}
</style>
